@import './base.less';
@vw: 3.75vw;

body {
  background-color: #f5f8fa;
  // background-color: pink;
}

header {
  position: fixed;
  height: (60/@vw);
  width: 100%;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 (14/@vw);
  z-index: 1;

  .left {
    display: flex;
    justify-content: last baseline;
    align-items: center;

    img {
      width: (36/@vw);
      height: (36/@vw);
      margin: (12/@vw) 0;
    }

    .txt {
      margin-left: (10/@vw);

      h3 {
        font-size: (13/@vw);
      }

      p {
        font-size: (11/@vw);
      }
    }
  }

  .right {
    a {
      display: block;
      font-size: (13/@vw);
      border-radius: (5/@vw);
      border: 1px #ff2442 solid;
      font-weight: 700;
      // margin: ;
      padding: (5/@vw) (10/@vw);
      color: #ff2442;
    }
  }
}

.main {
  // height: 1000px;

  .nav {
    padding-top: (60/@vw);
    width: 100%;
    height: (270/@vw);
    background-color: rgb(255, 64, 96);

    // z-index: 1;
    a {
      display: block;
      position: relative;

      i {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        font-size: (60/@vw);
        color: #fff;
      }
    }
  }

  .section {
    width: 100%;
    margin-top: (20/@vw);
    background-color: rgb(255, 255, 255);

    .text {
      font-size: (15/@vw);
      margin: 0 (15/@vw);
      padding: (15/@vw) 0;
    }

    .box {
      display: flex;
      // flex-wrap: wrap;
      border-radius: (500/@vw);
      padding: (10/@vw);


      a {
        display: block;
        margin: 0 (10/@vw)(10/@vw);
        box-shadow: (1px) (2/@vw) (5/@vw) rgb(151, 151, 151);
        border-radius: (5/@vw);


        .pic {

          // width: (172.5/@vw);
          // height: (230/@vw);
          img {
            border-radius: (5/@vw) (5/@vw) 0 0;
          }


        }

        p {
          padding: (10/@vw) (10/@vw) 0;
          font-size: (13/@vw);
          width: 100%;
        }

        h5 {
          padding: (10/@vw);
          font-weight: normal;
          font-size: (11/@vw);
          display: flex;
          align-items: center;

          span {
            display: block;
            width: (25/@vw);
            height: (25/@vw);
            background-color: #ff2442;
            border-radius: 50%;
            margin-right: (10/@vw);
          }
        }
      }
    }
  }
}

footer {
  position: fixed;
  bottom: (30/ @vw);
  height: (38/ @vw);
  left: 30%;
  width: (150/ @vw);
  padding: 0(5 / @vw);
  line-height: (38 / @vw);
  color: #fff;
  text-align: center;
  background-color: #ff2442;
  border-radius: (50/@vw);

  a {
    display: block;
    flex: 1;

    p {
      font-size: (14/@vw);
      color: #fff;

      span {
        padding: (3/@vw) (5/@vw);
        background-color: #fff;
        color: #ff2442;
        margin-right: (3/@vw);
        border-radius: (50/@vw);
        font-size: (15/@vw);
        font-weight: 700;
      }
    }
  }
}